<template>
  <van-cell :value="name" center value-class="value" v-on="$listeners">
    <template #title>
      <van-image  :src="avatar" radius="10"/>
    </template>
    <div class="name">{{name}}</div>
    <OnlineStatus :status="online" />
  </van-cell>
</template>

<script>
import OnlineStatus from '@/components/OnlineStatus.vue'
export default {
  name: 'ContactItem',
  components: {
    OnlineStatus
  },
  props: {
    avatar: String,
    name: String,
    online: Number
  }
}
</script>

<style lang="scss" scoped>
.van-cell__title {
  flex-grow: 0;
  margin-right: 10px;
  height: 50px;
  .van-image{
    width: 50px;
    height: 50px;
  }
}
.value {
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  box-sizing: border-box;
  .name{
    font-size: $font-size-lg;
    color: $gray-8;
  }
}
</style>
